<template>
  <el-table :max-height="800" :data="goodsList" style="margin-top: 20px;">
    <el-table-column label="操作" width="110" align="center">
      <template slot-scope="scope">
        <el-button
          icon="el-icon-minus"
          type="danger"
          plain
          size="medium"
          circle
          @click="subBtn(scope.$index)">
        </el-button>
      </template>
    </el-table-column>
    <el-table-column label="服务分类" width="190" align="center">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.serverClassifyId"
          clearable
          placeholder="请选择服务分类"
          @change="handleServerClassifyChange(scope.row)">
          <el-option v-for="item in businessClassifyList" :value="item.id" :label="item.name" :key="item.id">

          </el-option>
        </el-select>
      </template>
    </el-table-column>

    <el-table-column label="次级服务分类" width="210" align="center">
      <template slot-scope="scope">
        <el-select
          v-model="scope.row.thirdClassifyId"
          clearable
          placeholder="请选择次级服务分类"
          @focus="handleServerClassify3Focus(scope.row)"
        >
          <el-option v-for="item in scope.row.threeLevelClassList" :value="item.id" :label="item.name" :key="item.id">

          </el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="产品名称" width="190" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name" placeholder="请输入产品名称" clearable></el-input>
      </template>
    </el-table-column>
    <el-table-column label="产品简介" width="210" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.introduce" placeholder="请输入产品简介" clearable></el-input>
      </template>
    </el-table-column>
    <el-table-column label="产品描述" width="210" align="center">
      <template slot-scope="scope">
        <el-input v-model="scope.row.describes" placeholder="请输入产品描述" clearable></el-input>
      </template>
    </el-table-column>
    <el-table-column label="产品图片" align="center" width="120">
      <template slot-scope="scope">
        <upload-img :index="scope.$index" class="upload-img" @uploadFileList="getFileUrl" folder="images">
          <img width="100%" v-if="scope.row.images" :src="scope.row.images" alt="">
          <i v-if="!scope.row.images" class="el-icon-plus"></i>
        </upload-img>
      </template>
    </el-table-column>
    <el-table-column label="是否上门" width="100px" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.visitFlag">
          <el-option :value="1" label="是"></el-option>
          <el-option :value="0" label="否"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="是否到店" width="100px" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.shopFlag">
          <el-option :value="1" label="是">
          </el-option>
          <el-option :value="0" label="否">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="是否远程" width="100px" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.remoteFlag">
          <el-option :value="1" label="是"></el-option>
          <el-option :value="0" label="否"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="紧急通知" width="100px" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.fastFlag">
          <el-option :value="1" label="是"></el-option>
          <el-option :value="0" label="否"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="是否需配送费" width="100px" align="center">
      <template slot-scope="scope">
        <el-select v-model="scope.row.deliveryFlag">
          <el-option :value="1" label="是"></el-option>
          <el-option :value="0" label="否"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="原价" align="center" width="125">
      <template slot-scope="scope">
        <el-input type="number"
                  v-model.number="scope.row.price"
                  clearable
                  @input="handleMoneyInputList(scope.row,0)"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="售价" align="center" width="125">
      <template slot-scope="scope">
        <el-input type="number" v-model.number="scope.row.salePrice" clearable></el-input>
      </template>
    </el-table-column>
    <el-table-column label="包装费" align="center" width="125">
      <template slot-scope="scope">
        <el-input type="number"
                  v-model.number="scope.row.packageFee"
                  clearable
                  @input="handleMoneyInputList(scope.row,2)"></el-input>
      </template>
    </el-table-column>
    <!--<el-table-column label="配送费" align="center" width="125">
      <template slot-scope="scope">
        <el-input type="number"
                  v-model.number="scope.row.deliveryFee"
                  clearable
                  @input="handleMoneyInputList(scope.row,1)"></el-input>
      </template>
    </el-table-column>-->
    <el-table-column label="商户折扣比例" align="center" width="125">
      <template slot-scope="scope">
        <el-input type="number" v-model.number="scope.row.discount" clearable
                  @input="handleMoneyInputList(scope.row,3)"
        >
          <span slot="suffix" style="line-height: 40px;">%</span>
        </el-input>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  import ServerClassifyApi from "@/api/server/serverClassify"
  import UploadImg from "@/components/UploadImg.vue"

  export default {
    props: {
      businessId: {
        type: Number,
        default: undefined
      },
      goodsList: {
        type: Array,
        default: () => [],
      }
    },
    /*watch: {
      goodsList: {
        handler(value) {
          if (value) {
            this.goodsChangeList = value
          }
        },
        immediate: true
      }
    },*/
    data() {
      return {
        businessClassifyList: [], // 商户关联的二级分类
        //goodsChangeList:[]
      }
    },

    components:{
      UploadImg
    },
    mounted(){
      this.init();
    },
    methods: {
      init(){
        if (this.businessId){
          this.getBusinessClassifyList();

          // 获取表格里面所有的三级服务分类数据格式化为数组
          this.goodsList.forEach(item=>{
            item.threeLevelClassList = []
            if(item.thirdClassifyId){
              item.threeLevelClassList =  [{id:item.thirdClassifyId,name:item.thirdClassifyName}]
            }
          })

          //this.goodsChangeList = goodsList;
        }
      },
      subBtn(index) {
        this.goodsList.splice(index, 1)
      },
      // 获取服务图片路径
      getFileUrl(val) {
        if (val.uploadFileList.length > 0) {
          this.$Utils.notifySuccess("上传成功");
        }
        this.goodsList[val.index].images = val.uploadFileList[0]
      },
      // 获取服务分类二级列表
      getBusinessClassifyList(){
        ServerClassifyApi.listIdName({businessId:this.businessId,level:2}).then(res => {
          this.businessClassifyList = res.data
        })
      },
      // 表格中的服务分类改变的时候
      handleServerClassifyChange(row) {
        row.thirdClassifyId = ""
        row.threeLevelClassList = []
      },
      // 三级服务列表聚焦,获取三级服务列表
      handleServerClassify3Focus(row){
        //console.log(JSON.stringify(row),1)
        if(row.serverClassifyId){
          ServerClassifyApi.listIdName({level:3,parentId:row.serverClassifyId}).then(res=>{
            row.threeLevelClassList = res.data.map(item=>({id:item.id,name:item.name}))
          })
        }
      },
      // 列表价格、配送费、包装费的输入限制
      handleMoneyInputList(row, flag) {
        // flag为0表示原价，为1表示配送费，为2表示包装费,3表示商户折扣比例
        if (!flag) {
          // 只保留两位小数
          row.price = parseFloat(parseFloat(row.price).toFixed(2))
          !row.price ? row.price = 0 : ""
        } else if (flag == 1) {
          row.deliveryFee = parseFloat(parseFloat(row.deliveryFee).toFixed(2))
          !row.deliveryFee ? row.deliveryFee = 0 : ""
        } else if (flag == 2) {
          row.packageFee = parseFloat(parseFloat(row.packageFee).toFixed(2))
          !row.packageFee ? row.packageFee = 0 : ""
        } else if (flag == 3) {
          row.discount = parseFloat(parseFloat(row.discount).toFixed(2))
          if (row.discount && row.discount > 99.72) {
            row.discount = 0
            this.$message.error("商户折扣比例只能是0-99.72之间")
          } else if (row.discount) {
            row.discount = parseFloat(parseFloat(row.discount).toFixed(2))
          } else {
            row.discount = 0
          }
        }
      },
      handleCompGoodsList(){
        this.$emit('getGoodsList',this.goodsList)
      }

    }
  }
</script>

<style lang="scss" scoped>
  .upload-img-business{
    &::v-deep .el-upload-dragger{
      display: flex;
      justify-content: space-around;
      align-items: center;
      .tip{
        padding-bottom: 30px;
      }
    }
  }
  .upload-img {
    &::v-deep .el-upload-dragger {
      width: 100px;
      height: 70px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .el-icon-plus {
      font-size: 24px;
      vertical-align: -24px;
    }
  }
</style>

